<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false" append-to-body>
        <el-form ref="form" :model="form" :rules="rules">
<!--            <el-form-item label="兑换设置ID" :label-width="formLabelWidth" prop="exchangeId">-->
<!--                <fortress-select-->
<!--                        v-model="form.exchangeId"-->
<!--                        :dictList="exchangeIdList"-->
<!--                        placeholder="请选择兑换设置ID"-->
<!--                        clearable-->
<!--                ></fortress-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="卡券名称" :label-width="formLabelWidth" prop="name">-->
<!--                <el-input-->
<!--                        v-model="form.name"-->
<!--                        autocomplete="off"-->
<!--                        placeholder="请输入卡券名称"-->
<!--                ></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="兑换开始时间" :label-width="formLabelWidth" prop="startTime">-->
<!--                <el-date-picker-->
<!--                        v-model="form.startTime"-->
<!--                        type="datetime"-->
<!--                        placeholder="选择日期时间"-->
<!--                        value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                >-->
<!--                </el-date-picker>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="兑换截至时间" :label-width="formLabelWidth" prop="endTime">-->
<!--                <el-date-picker-->
<!--                        v-model="form.endTime"-->
<!--                        type="datetime"-->
<!--                        placeholder="选择日期时间"-->
<!--                        value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                >-->
<!--                </el-date-picker>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="兑换编号" :label-width="formLabelWidth" prop="no">-->
<!--                <el-input-->
<!--                        v-model="form.no"-->
<!--                        autocomplete="off"-->
<!--                        placeholder="请输入兑换编号"-->
<!--                ></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="兑换券类型" :label-width="formLabelWidth" prop="type">-->
<!--                <fortress-radio-group-->
<!--                        v-model="form.type"-->
<!--                        :dictList="CodeType_exchangeList"-->
<!--                >-->
<!--                </fortress-radio-group>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="是否绑定" :label-width="formLabelWidth" prop="isBind">-->
<!--                <el-switch-->
<!--                      v-model="form.isBind"-->
<!--                      active-color="#13ce66"-->
<!--                      inactive-color="#ff4949"-->
<!--                      :active-value="1"-->
<!--                      :inactive-value="2"-->
<!--                ></el-switch>-->
<!--            </el-form-item>-->
            <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
                <fortress-select
                        v-model="form.status"
                        :dictList="VoucherStatus_exchangeList"
                        placeholder="请选择状态"
                        clearable
                ></fortress-select>
            </el-form-item>
<!--            <el-form-item label="会员id" :label-width="formLabelWidth" prop="memberId">-->
<!--                <fortress-select-->
<!--                        v-model="form.memberId"-->
<!--                        :dictList="memberIdList"-->
<!--                        placeholder="请选择会员id"-->
<!--                        clearable-->
<!--                ></fortress-select>-->
<!--            </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
            <el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import { exchangevoucherInfo, exchangevoucherSave, exchangevoucherEdit } from "@/api/exchange/exchangevoucher.js";
    import { enumList,urlList, } from "@/api/public.api.js";
    
    export default {
        data() {
            return {
                visible: false,
                form: {
                    exchangeId:"",
                    name:"",
                    startTime:"",
                    endTime:"",
                    no:"",
                    type:"",
                    isBind:"2",
                    status:"",
                    memberId:"",
                },
                formLabelWidth: "120px",
                rules: {
                    status:[
                          { required: true, message: "请输入状态", trigger: "blur" },
                      ],
                },
                CodeType_exchangeList:[],
                YesNoList:[],
                VoucherStatus_exchangeList:[],
                exchangeIdList:[],
                memberIdList:[],
            };
        },
        created() {
        },
        methods: {
            queryEnumList(){
                this.CodeType_exchangeList = [];
                enumList("CodeType","exchange").then((resp) => {
                  if (resp.code == 0) {
                    this.CodeType_exchangeList = resp.data;
                  }
                });
                this.YesNoList = [];
                enumList("YesNo","").then((resp) => {
                  if (resp.code == 0) {
                    this.YesNoList = resp.data;
                  }
                });
                this.VoucherStatus_exchangeList = [];
                enumList("VoucherStatus","exchange").then((resp) => {
                  if (resp.code == 0) {
                    this.VoucherStatus_exchangeList = resp.data;
                  }
                });
            },
            queryUrlList(){
                this.exchangeIdList = [];
                urlList("/exchange/exchangeConfig/list").then((resp) => {
                  if (resp.code == 0) {
                    if (resp.data) {
                      resp.data.forEach((item) => {
                        this.exchangeIdList.push({ code: item.id, name: item.name });
                      });
                    }
                  }
                });
                this.memberIdList = [];
                urlList("/member/member/list").then((resp) => {
                  if (resp.code == 0) {
                    if (resp.data) {
                      resp.data.forEach((item) => {
                        this.memberIdList.push({ code: item.id, name: item.nick_name });
                      });
                    }
                  }
                });
            },
            init(id) {
                this.resetForm();
                this.queryEnumList();
                this.queryUrlList();
                //修改
                if (id) {
                    exchangevoucherInfo(id).then((resp) => {
                        if (resp.code == 0) {
                            this.$nextTick(() => {
                                this.form = {
                                    ...this.form,
                                    ...resp.data,
                                };
                            });
                        } else {
                            this.$msg({
                                message: resp.msg,
                                type: "error",
                            });
                        }
                    });
                }
                this.visible = true;
            },
            //提交表单数据
            submitForm() {
                this.$refs["form"].validate((valid) => {
                if (valid) {
                    //修改
                    if (this.form.id) {
                        exchangevoucherEdit(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                            this.$emit("refreshData");
                            this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    //新增
                    } else {
                        exchangevoucherSave(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                                this.$emit("refreshData");
                                this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
                });
            },
            resetForm() {
                this.form = {
                    exchangeId:"",
                    name:"",
                    startTime:"",
                    endTime:"",
                    no:"",
                    type:"",
                    isBind:"2",
                    status:"",
                    memberId:"",
                };
                this.$nextTick(() => {
                    if (this.$refs["form"]) {
                        this.$refs["form"].resetFields();
                    }
                });
            },
        },
    };
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        max-height: 274px;
        padding: 7px;
        overflow: hidden;
        overflow-y: auto;
        font-weight: normal;
    }
</style>
